<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>如果所有子选项都选中，父选项才选中</title>
    <style type="text/css">
        h3{
            text-align: center;
        }
       .mydemo{
           width:300px;
           font: 20px "microsoft yahei";
           color: darkolivegreen;
           margin:10px auto;
       }
        dt{
            width:100%;
            height:30px;
            background-color:burlywood;
        }
        dd{
            width:86.5%;
            height:30px;
        }
        .title i,.title1 i{
            float: right;
            display:block;
            width:16px;
            height:16px;
            margin:7px 10px;
            background: url("../images/close.png") no-repeat;
            cursor: pointer;
        }
        .child dd{
            background-color: bisque;
        }
        input{
            cursor: pointer;
        }
        #btnall,#btnno,#btnreverse{
            padding:0 5px;
        }
        .child .child dd{
            width:100%;
            height:30px;
        }
        .variety{
            width:73%;
            margin-left:13.5%;
        }
        .variety dd{
            background-color: beige;
        }
    </style>
</head>
<body>
<h3>如果所有子选项都选中，父选项才选中</h3>
<div class="mydemo">
    <input type="checkbox" id="all"/>
    <input id="btnall" type="button" value="全选"/>
    <input id="btnno" type="button" value="全不选"/>
    <input id="btnreverse" type="button" value="反选"/>
    <input id="btnvalues" type="button" value="获取选中项的值"/>
    <dl>
        <div id="fruit">
            <dt class="title"><input type="checkbox" name="fruit" value="我喜欢所有水果"/>我喜欢所有水果<i></i></dt>
            <div class="child">
                <dd class="product"><input type="checkbox" name="fruit" value="苹果"/>苹果</dd>
                <dd class="title1 product product1"><input type="checkbox" name="fruit" value="香蕉"/>香蕉<i></i></dd>
                <div class="child variety">
                    <dd><input type="checkbox" name="fruit" value="国产"/>国产</dd>
                    <dd><input type="checkbox" name="fruit" value="进口"/>进口</dd>
                </div>
                <dd class="title1 product product2"><input type="checkbox" name="fruit" value="橘子"/>橘子<i></i></dd>
                <div class="child variety">
                    <dd><input type="checkbox" name="fruit" value="丑橘"/>丑橘</dd>
                    <dd><input type="checkbox" name="fruit" value="柑橘"/>柑橘</dd>
                </div>
                <dd class="product"><input type="checkbox" name="fruit" value="葡萄"/>葡萄</dd>
            </div>
        </div>
        <div id="drink">
            <dt class="title"><input type="checkbox" name="drink" value="我喜欢所有饮料"/>我喜欢所有饮料<i></i></dt>
            <div class="child">
                <dd class="product"><input type="checkbox" name="drink" value="橙汁"/>橙汁</dd>
                <dd class="product"><input type="checkbox" name="drink" value="柠檬水"/>柠檬水</dd>
                <dd class="product"><input type="checkbox" name="drink" value="雪碧"/>雪碧</dd>
                <dd class="title1 product product3"><input type="checkbox" name="drink" value="锐噢"/>锐噢<i></i></dd>
                <div class="child variety">
                    <dd><input type="checkbox" name="drink" value="5°"/>5°</dd>
                    <dd><input type="checkbox" name="drink" value="8°"/>8°</dd>
                </div>
            </div>
        </div>
    </dl>
</div>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    $(function(){
        //三级子选项默认隐藏
        $(".variety").css("display","none");
        $(".title1 i").css("backgroundImage","url('../images/open.png')");
        //获取全选框
        var all=$("#all");
        //设置初始的子项选中数量和父项选中数量为0
        var soncheckednum= 0,fathercheckednum= 0,varietiescheckednum=0;
        //点击全选框，实现全选或全不选功能
        all.click(function(){
            if($(this).prop("checked")){
                $("dl input").prop("checked",true);
            }
            else{
                $("dl input").prop("checked",false);
            }
            toggleAttr(this);
            toggleAttr($("dl input"));
        });
        //点击全选按钮，实现全选功能
        $("#btnall").click(function(){
           $("input[type=checkbox]").prop("checked",true);
            toggleAttr($("input[type=checkbox]"));
        });
        //点击全不选按钮，实现全不选功能
        $("#btnno").click(function(){
            $("input[type=checkbox]").prop("checked",false);
            toggleAttr($("input[type=checkbox]"));
        });
        //点击反选按钮，实现反选功能:如果选中则不选；如果没选则选中
        $("#btnreverse").click(function(){
            //遍历所有子选项,如果选中则不选；如果没选则选中
            $(".child input").each(function(){
                $(this).prop("checked",!$(this).prop("checked"));
                toggleAttr(this);
            });
            //如果所有子选项选中，则当前的父选项选中
            fatherchk("#fruit");
            fatherchk("#drink");
            allchk();
            productchk(".product1");
            productchk(".product2");
        });
        //点击父选项，实现子选项同步
        //title    一级父选框
        //title1   二级父选框
        $(".title input,.title1 input").click(function(){
            //当前的子选项的状态与父选项同步
            $(this).parent().next(".child").find("input").prop("checked",$(this).prop("checked"));
            toggleAttr(this);
            //如果所有子选项都选中，则父选项选中
            fatherchk("#fruit");
            fatherchk("#drink");
            allchk();
            //如果当前为选中，则为其添加checked属性，否则移除checked属性
            toggleAttr($(this).parent().next(".child").find("input"));
        });
        //点击每个子选框(产品)
        $(".child input").click(function(){
            productchk(".product1");
            productchk(".product2");
            fatherchk("#fruit");
            productchk(".product3");
            fatherchk("#drink");
            allchk();
            //如果当前为选中，则为其添加checked属性，否则移除checked属性
            toggleAttr(this);
        });
        //点击获取选中项的值按钮，实现获取所有选中项的值，以数组形式返回
        $("#btnvalues").click(function(){
            var values=[];
            $("dl input[checked]").each(function(i){
                values[i]=$(this).val();
            });
            var valuestr=values.join(",");
            alert(valuestr);
        });
        //点击图标，打开/关闭子选项，切换图标背景图片
        $("i").click(function(){
            //子选项显隐切换
            $(this).parent().next().toggle();
            //如果子选项显示，用close图标
            if($(this).parent().next().css("display")=="block"){
                $(this).css("backgroundImage","url('../images/close.png')");
            }
            //如果子选项隐藏，用open图标
            else{
                $(this).css("backgroundImage","url('../images/open.png')");
            }
        });
        /*
        //ele   元素
        //添加/移除选框的选中属性
        //如果当前元素被选中，则添加checked属性，否则移除checked属性
        */
        function toggleAttr(ele){
            if($(ele).prop("checked")==true){
                $(ele).attr("checked",true);
            }
            else if($(ele).prop("checked")==false){
                $(ele).removeAttr("checked");
            }
        }
        /*
         //id   当前父选项的id
         //父选框是否被选中
         //根据当前父选项的id查找其所有子选项，如果所有子选项都选中，则当前父选项选中，否则不选中
        */
        function fatherchk(id){
            //获取当前父选框
            var father=$(id+" .title input");
            //获取当前父选项下的所有子选框
            var sons=$(id+" .product input");
            //获取子选项的个数
            var sonnum=sons.length;
            //遍历所有子选项，如果有选中，则soncheckednum+1
            sons.each(function(){
                if($(this).prop("checked")==true){
                    soncheckednum++;
                }
            });
            if(sonnum==soncheckednum){
                father.prop("checked",true);
            }
            else{
                father.prop("checked",false);
            }
            toggleAttr(father);
            soncheckednum=0;
        }
        /*
         //cls   当前父选项（产品）的class
         //父选框（产品）是否被选中
         //根据当前父选项(产品)的class查找其所有子选项（品种），如果所有子选项（品种）都选中，则当前父选项（产品）选中，否则不选中
         */
        function productchk(cls){
            //获取当前的产品选框
            var product=$(cls+" input");
            //获取当前产品选项下的所有子选框（品种）
            var varieties=$(cls).next(".variety").find("input");
            var varietiesnum=varieties.length;
            //遍历所有子选项，如果有选中，则soncheckednum+1
            varieties.each(function(){
                if($(this).prop("checked")==true){
                    varietiescheckednum++;
                }
            });
            if(varietiesnum==varietiescheckednum){
                product.prop("checked",true);
            }
            else{
                product.prop("checked",false);
            }
            toggleAttr(product);
            varietiescheckednum=0;
        }
        /*
        //全选框是否被选中
        //如果所有父选项都选中，则全选框选中
        */
        function allchk(){
            //获取所有父选框
            var fathers=$(".title input");
            //获取父选项的个数
            var fathernum=fathers.length;
            //遍历所有父选项，如果有选中，则fathercheckednum+1
            fathers.each(function(){
                if($(this).prop("checked")==true){
                    fathercheckednum++;
                }
            });
            if(fathernum==fathercheckednum){
                all.prop("checked",true);
            }
            else{
                all.prop("checked",false);
            }
            toggleAttr(all);
            fathercheckednum=0;
            return;
        }
    });
</script>
</body>
</html>